<template>
  <div class="SingerInfoA">
      <ul>
          <li v-for="(v,i) in singerSingleList" :key="i">
              <div class="SingerInfoA_a">{{i+1}}<span class="iconfont icon-bofang" @click="getmusicId(v.id)"></span></div>
              <div class="SingerInfoA_b"><router-link :to="`/songinfo/${v.id}`">{{v.name}}</router-link><span>&nbsp;-&nbsp;{{v.alia[0]}}</span></div>
              <div class="SingerInfoA_c">{{changetime(v.dt)}}</div>
              <div class="SingerInfoA_d"><router-link :to="`/albuminfo/${v.al.id}`">{{v.al.name}}</router-link></div>
          </li>
      </ul>
  </div>
</template>
<script>
import axios from "axios";
import { mapMutations } from "vuex";
export default {
  data() {
    return {
      singerSingleList: {},
    };
  },
  //
  methods: {
    // 获取歌手单曲
    getsingerSingleList() {
      axios
        .get(`http://127.0.0.1:3000/artists?id=${this.$route.params.id}`)
        .then((res) => {
            this.singerSingleList = res.data.hotSongs;
        });
    },
     ...mapMutations(["getmusicId"]),
    changetime(e) {
      let m =
        Math.floor(e / 1000 / 60) > 9
          ? Math.floor(e / 1000 / 60)
          : "0" + Math.floor(e / 1000 / 60);
      let s =
        Math.floor(e / 1000 - m * 60) > 9
          ? Math.floor(e / 1000 - m * 60)
          : "0" + Math.floor(e / 1000 - m * 60);
      return m + ":" + s;
    },
    
  },
  // 
    created () {
        this.getsingerSingleList();
    }
};
</script>
<style scoped>
.SingerInfoA>ul{
    margin-top: 20px;
}
.SingerInfoA>ul>li{
    display: flex;
    padding: 6px 10px;
    font-size: 12px;
}
.SingerInfoA>ul>li:nth-child(odd){
    background-color: #f7f7f7;
}
.SingerInfoA>ul>li>.SingerInfoA_a{
    flex: 1;
    display: flex;
    justify-content: space-around;
    color: #999999;
}
.SingerInfoA>ul>li>.SingerInfoA_a>span{
    font-size: 20px;
    color: #b3b3b3;
    cursor: pointer;
}
.SingerInfoA>ul>li>.SingerInfoA_a>span:hover{

    color: #666666;
}
.SingerInfoA>ul>li>.SingerInfoA_b{
    flex: 4;
    overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.SingerInfoA>ul>li>.SingerInfoA_b>a{
    color: #333;
}
.SingerInfoA>ul>li>.SingerInfoA_b>a:hover{
    text-decoration: underline;
}
.SingerInfoA>ul>li>.SingerInfoA_b>span{
    color: #aeaeae;
}
.SingerInfoA>ul>li>.SingerInfoA_c{
    flex: 1;
    color: #666666;
}
.SingerInfoA>ul>li>.SingerInfoA_d{
    flex: 2;
}
.SingerInfoA>ul>li>.SingerInfoA_d>a{
    color: #333;
}
.SingerInfoA>ul>li>.SingerInfoA_d>a:hover{
    text-decoration: underline;
}
</style>